<script>
import TopNav from "../components/TopNav.vue";
import BomNav from "../components/BomNav.vue";
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { getCatalogueData } from "../api/liber.js";
import { getLiberJsonData } from "../api/home.js";

export default {
  components: {
    TopNav,
    BomNav,
  },
  setup() {
    let router = useRouter(); //实例化路由

    window.localStorage.setItem("night", false);
    let data = reactive({
      hotShow: true,
      volumeId: null,
      binnerlist: [
        {
          id: 1,
          srcs: "https://static.zongheng.com/upload/recommend/7c/ba/7cba572fce98b1c49a0911f9258babcf.jpeg",
        },
        {
          id: 2,
          srcs: "https://static.zongheng.com/upload/recommend/4c/2d/4c2d5f9cf97cdb6b21a8273e02fe7e80.jpeg",
        },
        {
          id: 3,
          srcs: "https://static.zongheng.com/upload/recommend/33/bf/33bf775119c70a69926555aeb3818f65.jpeg",
        },
      ],
      toplist: [], //榜单数组合集
      rankList1: [], //榜单数组1
      rankList2: [], //榜单数组2
      rankList3: [], //榜单数组3
      tuilists: [], //精选好书数组
    });

    let liberFun = (id) => {
      let params = {
        books: id,
        libers: "",
      };
      getCatalogueData(params)
        .then((item) => {
          // console.log(item.data.volumes[0].volumeId);
          console.log(item.data.volumes);
          data.volumeId = item.data.volumes[0].volumeId;
          params.libers = item.data.volumes[0].chapters[0].chapterId;
        })
        .then(() => {
          router.push({
            path: "/page",
            query: {
              books: params.books,
              libers: params.libers,
              volumeId: data.volumeId,
            },
          });
        });
    };

    getLiberJsonData()
      .then((item) => {
        data.rankList1 = item.data[1].lists; //统一长度
        data.rankList2 = item.data[2].lists[0].lists.slice(0, 5); //统一长度
        data.rankList3 = item.data[2].lists[1].lists.slice(0, 5); //统一长度
        data.tuilists = item.data[2].lists[0].lists;
      })
      .then(() => {
        data.toplist.push(data.rankList1);
        data.toplist.push(data.rankList2);
        data.toplist.push(data.rankList3);
      });

    return {
      data,
      liberFun,
    };
  },
};
</script>


<template>
  <!-- 引入顶部导航条 -->
  <van-sticky>
    <TopNav />
  </van-sticky>
  <!-- @touchstart="gtouchstart" -->
  <div class="home">
    <div class="container">
      <!-- 显示内容 -->
      <div class="home-module">
        <!-- 轮播图 -->
        <div class="banner">
          <van-swipe :autoplay="3000" indicator-color="#ff9b97" lazy-render>
            <van-swipe-item v-for="item in data.binnerlist" :key="item.id">
              <img :src="item.srcs" />
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 猜你喜欢 -->
        <div class="like">
          <div class="like-title">
            <span>推荐</span>
          </div>

          <!-- 大图推荐 -->
          <div class="like-book">
            <div class="like-img">
              <img
                src="https://bookcover.yuewen.com/qdbimg/349573/1033253483/300"
                alt="推荐书籍封面"
              />
            </div>
            <div class="like-img-text">
              <div class="like-img-title">苍穹都市的超能力者</div>
              <div class="like-img-contain">
                二千年前，皇帝斩龙于野，开创人类的时代。此后每当邪龙肆虐，总有英雄应运而生，如此时光长久流逝，人的世界迎来平和。直至世纪之交，离奇出现的超能力者们引发了前所未有的骚动。人们在空中建造了超能力者的收容所，那就是巨龙背上的苍穹之都。春季的某日，刚升入大学半年的公孙策与自称无常法使的猎人相遇了。“喂你居然连这种事情都做得到吗？！”“这很正常，因为我是超能力者。”——于是，超能力青春校园恋爱格斗喜剧开始了！（书友群851773196，欢迎过来一起聊天）
              </div>
              <div class="like-img-message">
                <span>王子</span>
                <span>连载</span>
                <span>原生幻想</span>
                <span>114.53万字</span>
              </div>
            </div>
          </div>

          <!-- 缩略推荐 -->
          <div class="like-books-box">
            <div class="like-item" @click="liberFun('3377676')">
              <div class="like-item-imgs">
                <img
                  src="https://bookcover.yuewen.com/qdbimg/349573/1034867962/150"
                  alt="书籍封面"
                />
              </div>
              <div class="like-item-imgs-title">
                <p>北宋大法官</p>
                <span>南希北庆</span>
              </div>
            </div>
            <div class="like-item" @click="liberFun('3377676')">
              <div class="like-item-imgs">
                <img
                  src="https://bookcover.yuewen.com/qdbimg/349573/1031940621/150"
                  alt="书籍封面"
                />
              </div>
              <div class="like-item-imgs-title">
                <p>灵境行者</p>
                <span>卖报的小郎君</span>
              </div>
            </div>
            <div class="like-item" @click="liberFun('3377676')">
              <div class="like-item-imgs">
                <img
                  src="https://bookcover.yuewen.com/qdbimg/349573/1033806888/150"
                  alt="书籍封面"
                />
              </div>
              <div class="like-item-imgs-title">
                <p>曾经，我想做个好人</p>
                <span>常世</span>
              </div>
            </div>
            <div class="like-item" @click="liberFun('3377676')">
              <div class="like-item-imgs">
                <img
                  src="https://bookcover.yuewen.com/qdbimg/349573/1031785579/150"
                  alt="书籍封面"
                />
              </div>
              <div class="like-item-imgs-title">
                <p>什么叫六边形打野</p>
                <span>这很科学啊</span>
              </div>
            </div>
          </div>
        </div>

        <div class="slideshow">
          <h3>排行榜</h3>
          <van-swipe :loop="false" :width="240" indicator-color="#ff9b97">
            <van-swipe-item v-for="(item, i) in data.toplist" :key="i">
              <div class="box" v-if="data.toplist">
                <div
                  class="item"
                  v-for="(items, index) in item"
                  :key="items.bookId"
                  @click="liberFun(items.bookId)"
                >
                  <img :src="items.coverImg" alt="items.bookName" />
                  <div
                    :class="[
                      'rank',
                      index == 0 ? 'first' : '',
                      index == 1 ? 'second' : '',
                      index == 2 ? 'third' : '',
                    ]"
                  >
                    {{ index + 1 }}
                  </div>
                  <div class="info">
                    <h4>{{ items.bookName }}</h4>
                    <p>{{ items.authorPenName }}</p>
                  </div>
                </div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>

        <!-- 推荐 -->
        <div class="select">
          <h4>精选好书</h4>
          <div
            class="item"
            v-for="item in data.tuilists"
            :key="item.bookId"
            @click="liberFun(item.bookId)"
          >
            <img :src="item.coverImg" :alt="item.bookName" />
            <div class="info">
              <h5>{{ item.bookName }}</h5>
              <p>{{ item.introduction }}</p>
              <div class="mess">
                <span>{{ item.authorPenName }}</span>
                <span>连载</span>
                <span>{{ item.categoryName }}</span>
                <span>{{ item.remark }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部导航条 -->
  <BomNav />
</template>

<style lang="scss" scoped>
.home {
  margin-top: 12px;
  padding: 0px 16px;
  .home-module {
    //主页模块
    box-sizing: border-box;
    padding-bottom: 80px;
    .banner {
      box-shadow: 0px 0px 4px #ccc;
      border-radius: 10px;
      .van-swipe-item {
        img {
          display: block;
          width: 100%;
          border-radius: 10px;
        }
      }
    }
    .slideshow {
      //轮播图
      margin-top: 20px;
      box-shadow: 0px 0px 4px #ccc;
      border-radius: 10px;
      h3 {
        height: 60px;
        font-size: 20px;
        font-weight: 800;
        line-height: 60px;
        margin-left: 20px;
      }
      .van-swipe-item {
        .box {
          border-radius: 10px;
          width: 100%;
          background-color: #fff;
          .item {
            margin-bottom: 10px;
            margin-left: 20px;
            display: flex;
            img {
              display: block;
              width: 48px;
              height: 64px;
              border-radius: 8px;
            }
            .rank {
              font-size: 14px;
              color: #999;

              margin-left: 6px;
            }
            .info {
              margin-left: 6px;
              h4 {
                width: 120px;
                height: 40px;
                line-height: 20px;
                font-size: 14px;
                font-weight: 800;
                word-wrap: break-word;
                overflow: hidden;
                display: -webkit-box; //弹性盒子布局
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              p {
                font-size: 12px;
                color: #999;
                height: 24px;
                line-height: 24px;
              }
            }
            .rank.first {
              font-weight: 800;
              color: red;
            }
            .rank.second {
              font-weight: 800;
              color: rgb(255, 162, 0);
            }
            .rank.third {
              font-weight: 800;
              color: rgb(255, 230, 0);
            }
          }
        }
      }
    }
    .like {
      //猜你喜欢
      width: 100%;
      margin-top: 20px;
      padding: 0px 20px;
      box-sizing: border-box;
      box-shadow: 0px 0px 6px #ccc;
      border-radius: 10px;
      .like-title {
        //推荐标题
        span {
          height: 60px;
          line-height: 60px;
          font-weight: 800;
          font-size: 22px;
        }
      }
      .like-book {
        //大图推荐
        display: flex;
        .like-img {
          // width: 90px;
          // height: 120px;
          border-radius: 10px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .like-img-text {
          margin-left: 20px;
          .like-img-title {
            font-size: 20px;
            font-weight: 800;
          }

          .like-img-contain {
            width: 190px;
            display: -webkit-box;
            margin: 10px 0px;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; //显示几行
          }
          .like-img-message {
            span {
              font-size: 14px;
              margin-right: 20px;
              position: relative;
              &::after {
                content: "";
                display: block;
                position: absolute;
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #333;
                top: 0px;
                bottom: 0px;
                right: -10px;
                margin: auto 0;
              }
              &:nth-last-child(1)::after {
                display: none;
              }
            }
          }
        }
      }
      .like-books-box {
        //缩略推荐
        display: flex;
        margin-top: 26px;
        padding-bottom: 20px;
        justify-content: space-between;
        .like-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          align-content: center;
          .like-item-imgs {
            width: 68px;
            // height: 100px;
            border-radius: 10px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .like-item-imgs-title {
            width: 68px;
            p {
              width: 100%;
              color: #333;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span {
              width: 100%;
              font-size: 14px;
              color: #999;
              display: block;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .select {
      box-shadow: 0px 0px 4px #ccc;
      border-radius: 10px;
      margin-top: 20px;
      padding-bottom: 10px;
      h4 {
        height: 60px;
        font-size: 20px;
        font-weight: 800;
        line-height: 60px;
        margin-left: 20px;
      }
      .item {
        margin-left: 10px;
        display: flex;
        margin-bottom: 16px;
        img {
          display: block;
          width: 76px;
          height: 100px;
          border-radius: 10px;
        }
        .info {
          margin-left: 10px;
          h5 {
            font-weight: 800;
            font-size: 16px;
            height: 36px;
            line-height: 36px;
            word-wrap: break-word;
            overflow: hidden;
            display: -webkit-box; //弹性盒子布局
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          p {
            width: 250px;
            height: 36px;
            line-height: 18px;
            font-size: 12px;
            word-wrap: break-word;
            overflow: hidden;
            display: -webkit-box; //弹性盒子布局
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .mess {
          span {
            font-size: 12px;
            margin-right: 20px;
            position: relative;
            color: #999;
            &::after {
              content: "";
              display: block;
              position: absolute;
              width: 5px;
              height: 5px;
              border-radius: 50%;
              background-color: #999;
              top: 0px;
              bottom: 0px;
              right: -10px;
              margin: auto 0;
            }
            &:nth-last-child(1)::after {
              display: none;
            }
          }
        }
      }
    }
  }
}
</style>